<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<text class="title">我的电台</text>
			<!-- <uni-button class="add-btn" type="primary" size="mini" @click="addStation()">
				<uni-icons type="plus" size="16" color="#fff"></uni-icons>
			</uni-button> -->
		</view>

		<!-- 列表区域 -->
		<scroll-view class="radio-list" scroll-y>
			<view v-for="(item, index) in radioList" :key="index" class="radio-item"
				@click="switchStation(item as Station)">
				<view class="radio-content">
					<image class="radio-icon" :src="item.favicon" mode="aspectFill"></image>
					<view class="radio-info">
						<text class="radio-name">{{ item.name }}</text>
						<text class="radio-desc"></text>
					</view>
					<view class="radio-actions">
						<uni-icons type="more-filled" size="20" color="#B829F7"></uni-icons>
					</view>
				</view>
				<view class="slide-actions">
					<uni-button class="edit-btn" size="mini" type="primary">编辑</uni-button>
					<uni-button class="delete-btn" size="mini" type="warn">删除</uni-button>
				</view>
			</view>
		</scroll-view>

		<!-- 底部播放控制栏 -->
		<BottomPlayer></BottomPlayer>
	</view>
</template>

<script lang="ts" setup>
import type { Station } from '@/common/types/interface';
import { useStationStore } from '@/stores/useStationStore';
import { computed, ref } from 'vue';

import BottomPlayer from '@/components/BottomPlayer/BottomPlayer.vue';
import { usePlayerStore } from '@/stores/usePlayerStore';
const stationStore = useStationStore();
const playerStore = usePlayerStore();
const radioList = computed(() => {
	return stationStore.privateList;
});
const switchStation = (item: Station) => {
	playerStore.switchStation(item);
}
</script>

<style>
page {
	height: 100%;
}

.container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
}

.header {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	background: rgba(11, 11, 43, 0.85);
	backdrop-filter: blur(10px);
}

.title {
	font-size: 18px;
	font-weight: 600;
	background: linear-gradient(to right, #B829F7, #2C5DFF);
	-webkit-background-clip: text;
	color: transparent;
}

.add-btn {
	background: linear-gradient(135deg, #B829F7 0%, #2C5DFF 100%);
	border: none;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.3);
}

.radio-list {
	flex: 1;
	overflow: auto;
	padding: 20rpx;
}

.radio-item {
	position: relative;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.radio-content {
	display: flex;
	align-items: center;
	padding: 20rpx;
}

.radio-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.2);
}

.radio-info {
	flex: 1;
	margin-left: 20rpx;
}

.radio-name {
	font-size: 16px;
	color: #fff;
	margin-bottom: 8rpx;
}

.radio-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.radio-actions {
	padding: 0 10rpx;
}

.playing {
	background: linear-gradient(135deg, rgba(184, 41, 247, 0.2) 0%, rgba(44, 93, 255, 0.2) 100%);
	border: 1px solid rgba(184, 41, 247, 0.3);
}

.slide-actions {
	position: absolute;
	right: -200rpx;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
}

.edit-btn {
	margin-right: 10rpx;
	background: linear-gradient(135deg, #B829F7 0%, #2C5DFF 100%);
	border: none;
}

.delete-btn {
	background: #FF4D4F;
	border: none;
}
</style>